<template>
    <div class="login_whole" style="width:100%;height:100%;">
        <!-- {{timePicker}} -->
        <!-- {{tableData}} -->
        <!-- {{new Date()}} -->
        <!-- {{pageData}} -->
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content" style="display:flex;flex-direction:column;">
                    <div style="height:18%;padding:18px;align-content:center;display:flex;align-items:center;">
                        <span style="font-size:20px;font-weight:bold;">用户量</span>
                    </div>
                    <div style="height:22%;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:18px">2,000</el-col>
                            <el-col :span="5" :offset="13" style="text-align:center"><i class="iconfont ali-zongyonghuliang" style="font-size:35px;"></i></el-col>
                        </el-row>
                    </div>
                    <div style="flex: 0 0 1;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:14px">总用户量</el-col>
                            <el-col :span="5" :offset="14">120,000</el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content" style="display:flex;flex-direction:column;">
                    <div style="height:18%;padding:18px;align-content:center;display:flex;align-items:center;">
                        <span style="font-size:20px;font-weight:bold;">访问量</span>
                    </div>
                    <div style="height:22%;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:18px">5,000</el-col>
                            <el-col :span="5" :offset="13" style="text-align:center"><i class="iconfont ali-wangluofangwenquanxianshenqingliucheng" style="font-size:35px;"></i></el-col>
                        </el-row>
                    </div>
                    <div style="flex: 0 0 1;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:14px">总访问量</el-col>
                            <el-col :span="5" :offset="14">120,000</el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content" style="display:flex;flex-direction:column;">
                    <div style="height:18%;padding:18px;align-content:center;display:flex;align-items:center;">
                        <span style="font-size:20px;font-weight:bold;">下载量</span>
                    </div>
                    <div style="height:22%;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:18px">1,000</el-col>
                            <el-col :span="5" :offset="13" style="text-align:center"><i class="iconfont ali-xiajiantou" style="font-size:35px;"></i></el-col>
                        </el-row>
                    </div>
                    <div style="flex: 0 0 1;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:14px">总下载量</el-col>
                            <el-col :span="5" :offset="14">90,000</el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content" style="display:flex;flex-direction:column;">
                    <div style="height:18%;padding:18px;align-content:center;display:flex;align-items:center;">
                        <span style="font-size:20px;font-weight:bold;">使用量</span>
                    </div>
                    <div style="height:22%;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:18px">11,000</el-col>
                            <el-col :span="5" :offset="13" style="text-align:center"><i class="iconfont ali-taocanshiyongliang" style="font-size:35px;"></i></el-col>
                        </el-row>
                    </div>
                    <div style="flex: 0 0 1;padding:0 20px 15px 25px;">
                        <el-row>
                            <el-col :span="5" style="font-size:14px">总使用量</el-col>
                            <el-col :span="5" :offset="14">270,000</el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row style="height:83%;width:100%;margin-top:20px;background-color:white;border-radius: 8px;padding:10px 50px 0 50px;">
            <el-row style="height:14%;" type="flex" align="middle" :gutter="20">
                <el-col :span="4" :offset="2"><span style="font-size:18px;font-weight:bold;color:lightblack;width:10%;padding-right:20px;">快速搜索</span><el-input placeholder="请输入用户名" style="width:60%" v-model="searchName"></el-input></el-col>
                <el-col :span="8" :offset="1">
                    <span  style="font-size:18px;font-weight:bold;color:lightblack;padding-right:20px;">时间限定</span>
                    <el-date-picker
                        v-model="timePicker"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </el-col>
                <el-col :span="2" :offset="3"><el-button type="primary" @click="search">搜索</el-button></el-col>
            </el-row>
            <el-row style="height:80%;">
                <el-table :data="tableData" stripe border>
                        <el-table-column
                            prop="id"
                            fixed
                            label="序号" align="center"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="昵称"
                            width="150">
                        </el-table-column>
                        <!-- <el-table-column
                            prop="password_hash"
                            label="密码"  align="center"
                            width="1025">
                        </el-table-column> -->
                        <el-table-column
                            prop="mail"
                            label="邮箱"  align="center"
                            width="300">
                        </el-table-column>
                        <el-table-column
                            prop="mobile"
                            label="电话号"  align="center"
                            width="280">
                        </el-table-column>
                        <el-table-column
                            prop="create_time"
                            label="申请时间"  align="center"
                            width="320">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleOk(scope.$index, scope.row)">允许</el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleReject(scope.$index, scope.row)">拒绝</el-button>
                            </template>
                        </el-table-column>
                </el-table>
            </el-row>
            <el-row style="height:5%;background-color:white;display:flex;justify-content:center;align-items:center;">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="this.pageData.current_page"
                    :page-size="this.pageData.page_size"
                    :total="this.pageData.total"
                    @current-change="current_change"
                >
                </el-pagination>
            </el-row>
        </el-row>
    </div>
</template>

<script>
import Axios from '@/my_axios';

export default {
    name: 'userApply',
    mounted() {
        this.get_i();
        this.get_users();
        this.search();
    },
    data() {
        return {
            
            tableData:null,

            // pagenation
            pageData: {
                "total":0,
                "current_page":1,
                "page_size":10,
            },

            // timePicker
            timePicker:null,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            searchName: '',
        }
    },
    methods: {
        get_i(){
            Axios.post('/who_i').then((resp)=> {
                this.who_i = resp.data.data
                // console.log("*****", this.who_i)
            })
        },
        get_users() {
            Axios.post('/all_users', {
                name: this.search_input, // 为空时，表示搜索全部
            }).then((resp)=> {
                // console.log('9999:', resp)
                this.tableData = resp.data.data;
                this.search_input = '';
            })
        },
        search() {

            Axios.post('/getUserApply', {
                name: this.searchName, // 为空时，表示搜索全部
                timePicker:this.timePicker, // 为空时，表示搜索全部
                pagenation: this.pageData,
            }).then((resp)=> {
                // console.log(resp)
                this.tableData = resp.data.data.tableData;
                this.pageData.total = resp.data.data.total;
            }).catch((e)=>{
                console.log(e)
            })
        },
        current_change(data) {
            // alert(data)
            // console.log(this.pageData.current_page)
            this.pageData.current_page = data
        },
        handleOk(index, row){
            Axios.post('/applyOk', {
                id: row.id,
            }).then((resp)=> {
                alert(resp.data.errmsg)
                this.search()
            }).catch((e)=>{
                console.log(e)
            })
        },
        handleReject(index, row){
            // console.log(index, row)
            Axios.post('/applyReject', {
                id: row.id,
            }).then((resp)=> {
                alert(resp.data.errmsg)
                this.search()
            }).catch((e)=>{
                console.log(e)
            })
        },
    },
    watch: {
        'pageData.current_page': {
            handler(){
                this.search()
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

<style lang='less' scoped>
.grid-content {
    border-radius: 8px;
    box-shadow: 1 solid lightgrey;
    min-height: 36px;
    background: white;;
    height: 160px;
}

.el-date-editor {
    width:80%;
}
</style>
